<!-- 侧边菜单栏组件 -->
<template>
    <el-scrollbar>
        <!-- <el-menu active-text-color="#ffd04b" background-color="#94dcb8"  class="el-menu-vertical-demo" default-active="2" text-color="#fff"  router :collapse="isCollapse">    -->
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo aside1"
            default-active="1" text-color="#fff" router :collapse="isCollapse" unique-opened>

            <!-- <el-sub-menu v-for="item in routes[0].children" :index="item.path" :key="item.path"> -->
            <el-sub-menu v-for="item in asideList" :index="item.path" :key="item.path">
                <template #title>
                    <el-icon>
                        <component :is="item.meta.icon"></component>
                    </el-icon>
                    <span>{{ item.meta.label }}</span>
                </template>
                <el-menu-item v-for="ite in item.children" :key="ite.path" :index="ite.path">
                    <span>{{ ite.meta.label }}</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-scrollbar>
</template>

<script>
import request from "../server/request.js";
import { routes } from '../router/index.js'
import { mapState } from 'vuex'


export default {
    data() {
        return {
            routes,
            asideList: []
        }
    },
    created() {
        request.get('/classes/VueRole').then(res => {
            // console.log(res.data.results)
            const roleTable = res.data.results//获取角色列表
            // console.log(JSON.parse(localStorage.getItem('userInfo')).rolename)
            const rolename = JSON.parse(localStorage.getItem('userInfo')).rolename//提取本地缓存，获取当前用户的角色
            const role = roleTable.filter(item => item.name == rolename)//过滤出当前用户的角色信息
            const roleCheckMenu = role[0].roleCheckMenu//获取当前用户的角色信息中的菜单路由
            // console.log(roleCheckMenu,"wo")
            this.asideList = roleCheckMenu//将当前用户的角色信息中的菜单路由赋值给asideList
        })
    },

    computed: {
        ...mapState({
            isCollapse: state => state.user.isCollapse,


        })
    },
    // mounted() {
    //     console.log(routes,"lao")
    // }
}
</script>

<style lang="scss" scoped>
.el-menu {
    border: none;
}
</style>